<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--渲染器-->
    <meta name="renderer" content="webkit">
    <!--优先使用最新版本的IE 和 Chrome 内核-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>SIYUCMS 后台管理面板</title>
    <!-- 告诉浏览器该页面是自适应布局 -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/dist/css/skins/_all-skins.min.css">

    <!-- Bootstrap Table 表格插件样式 -->
    <link rel="stylesheet" href="/static/plugins/bootstrap-table/bootstrap-table.min.css" />

    <!-- Date Picker -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <!-- Time Picker -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- Datetime Picker -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.css">
    <!-- Color Picker -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
    <!-- Pace style -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/pace/pace.css">
    <!-- jQuery 3 -->
    <script src="/static/plugins/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- webuploader -->
    <link rel="stylesheet" type="text/css" href="/static/plugins/webuploader-0.1.5/webuploader.css">
    <script src="/static/plugins/webuploader-0.1.5/webuploader.js"></script>
    <script type="text/javascript">
        /**
         * 封装上传组件
         * @param list
         * @param filePicker_image
         * @param image_preview
         * @param image
         * @param more            是否图集
         * @param upload_allowext 格式限制
         * @param size            大小限制
         * @param type            上传类型[file/img]
         */
        function webupload(list, filePicker_image, image_preview, image, more, upload_allowext, size, type) {
            if (upload_allowext) {
                upload_allowext = upload_allowext.replace(/\|/g, ",");
            }
            if (size) {
                size = size * 1024;
            } else {
                size = 10240 * 1024 * 1024;
            }
            type = type || 'img';
            var $list = $("#" + list + "");                                // 这几个初始化全局的百度文档上没说明，好蛋疼
            var GUID = WebUploader.Base.guid();                            // 一个GUID
            var uploader = WebUploader.create({
                auto: true,                                                // 选完文件后，是否自动上传。
                swf: '/static/plugins/webuploader-0.1.5/uploader.swf',     // 加载swf文件，路径一定要对
                server: '/admin/upload/index.html' + '?upload_type=' + type, // 文件接收服务端
                pick: '#' + filePicker_image,                              // 选择文件的按钮。可选。
                resize: false,                                             // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                chunked: true,                                             // 是否分片
                chunkSize: 5 * 1024 * 1024,                                // 分片大小
                threads: 1,                                                // 上传并发数
                formData: {
                    // 由于Http的无状态特征，在往服务器发送数据过程传递一个进入当前页面是生成的GUID作为标示
                    GUID: GUID,                                            // 自定义参数
                },
                compress: false,
                fileSingleSizeLimit: size,                                 // 限制大小200M，单文件
                //fileSizeLimit: allMaxSize*1024*1024,                     // 限制大小10M，所有被选文件，超出选择不上
                accept: {
                    title: '上传图片/文件',
                    extensions: upload_allowext,                           // 允许上传的类型 'gif,jpg,jpeg,bmp,png'
                    mimeTypes: '*',                                        // 默认全部文件，为兼容上传文件功能，如只上传图片可写成img/*
                }
            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $list,
                    $percent = $li.find('.progress .progress-bar');
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo($li).find('.progress-bar');
                }
                //$li.find('p.state').text('上传中');
                $percent.css('width', percentage * 100 + '%');
            });
            uploader.on('uploadSuccess', function (file, response) {
                if (response.code == 0) {
                    $.modal.alertError(response.msg);
                }
                var url = response.url;
                if (more == true) {
                    var images = '<div class="row"><div class="col-xs-6"><input type="text" name="' + image + '[]" value="' + url + '" class="form-control"/></div> <div class="col-xs-3"><input class="form-control input-sm" type="text" name="' + image + '_title[]" value="' + file.name + '" ></div> <div class="col-xs-3"><button type="button" class="btn btn-block btn-warning remove_images">移除</button></div></div>';
                    var images_list = $('#more_images_' + image).html();

                    $('#more_images_' + image).html(images + images_list);

                } else {
                    $("input[name='" + image + "']").val(url);
                    $("#" + image_preview).attr('src', url);
                    $("#" + image_preview).parent("a").attr('href', url);
                }
            });
            uploader.on('uploadComplete', function (file) {
                $list.find('.progress').fadeOut();
            });
            // 错误提示
            uploader.on("error", function (type) {
                if (type == "Q_TYPE_DENIED") {
                    $.modal.alertError('请上传' + upload_allowext + '格式的文件！');
                } else if (type == "F_EXCEED_SIZE") {
                    $.modal.alertError('单个文件大小不能超过' + size / 1024 + 'kb！');
                } else if (type == "F_DUPLICATE") {
                    $.modal.alertError('请不要重复选择文件');
                } else {
                    $.modal.alertError('上传出错！请检查后重新上传！错误代码' + type);
                }
            });
        }
    </script>
    <!-- ckeditor4 -->
    <script src="/static/plugins/ckeditor/ckeditor.js"></script>

    <!-- sweetalert -->
    <link rel="stylesheet" href="/static/plugins/sweetalert/dist/sweetalert2.min.css">
    <script src="/static/plugins/sweetalert/dist/sweetalert2.min.js"></script>
    <script src="/static/plugins/sweetalert/lib/es6-promise.min.js"></script>
    <!-- Include a polyfill for ES6 Promises (optional) for IE11 -->
    <script src="/static/plugins/sweetalert/polyfill.js"></script>

    <!-- layer 弹层组件 -->
    <script src="/static/plugins/layer/layer.js"></script>

    <!-- zTree 树节点组件 -->
    <script type="text/javascript" src="/static/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>

    <!-- jQueryTagsInput -->
    <script src="/static/plugins/AdminLTE/plugins/jQueryTagsInput/jquery.tagsinput.js"></script>
    <link rel="stylesheet" href="/static/plugins/AdminLTE/plugins/jQueryTagsInput/jquery.tagsinput.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/bower_components/select2/dist/css/select2.min.css">
    <!-- SIYUCMS -->
    <link rel="stylesheet" href="/static/plugins/AdminLTE/dist/css/siyucms.css?v=20200310">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- 警告：Respond.js 不支持 file:// 方式查看（即本地方式查看）-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->

    <!-- SIYUCMS 常用封装 -->
    <script src="/static/plugins/siyu-ui.js?v=20200902"></script>
    <script src="/static/plugins/AdminLTE/siyucms.js?v=20200310"></script>

</head>
<body>
<table id="table"></table>

<script>
    var $table = $('#table')

    $(function() {
        $table.bootstrapTable({
            url: 'jquery-treegrid/treegrid.json',
            sidePagination: 'server',
            idField: 'id',
            showColumns: true,
            columns: [
                {
                    field: 'ck',
                    checkbox: true
                },
                {
                    field: 'status',
                    title: '状态',
                },
                {
                    field: 'name',
                    title: '名称'
                },
                {
                    field: 'permissionValue',
                    title: '权限值'
                }
            ],
            treeShowField: 'status', //在哪一列展开树形
            parentIdField: 'pid', //指定父id列
            onPostBody: function() {
                var columns = $table.bootstrapTable('getOptions').columns
                if (columns && columns[0][1].visible) {
                    $table.treegrid({
                        treeColumn: 2,
                        onChange: function() {
                            $table.bootstrapTable('resetWidth')
                        }
                    })
                }
            }
        })
    })

</script>


<!-- Bootstrap 3.3.7 -->
<script src="/static/plugins/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Bootstrap Table 表格插件样式 -->
<script src="/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/plugins/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="/static/plugins/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<link rel="stylesheet" href="/static/plugins/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css"/>
<script src="/static/plugins/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>

<link rel="stylesheet" href="/static/plugins/jquery-treegrid/css/jquery.treegrid.css">
<script src="/static/plugins/jquery-treegrid/js/jquery.treegrid.js"></script>
<script src="/static/plugins/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>

<!-- daterangepicker -->
<script src="/static/plugins/AdminLTE/bower_components/moment/min/moment.min.js"></script>
<script src="/static/plugins/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/static/plugins/AdminLTE/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/static/plugins/AdminLTE/bower_components/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>
<!-- timepicker -->
<script src="/static/plugins/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- datetimepicker -->
<script src="/static/plugins/AdminLTE/bower_components/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/plugins/AdminLTE/bower_components/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- color picker -->
<script src="/static/plugins/AdminLTE/bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>

<!-- Select2 -->
<script src="/static/plugins/AdminLTE/bower_components/select2/dist/js/select2.full.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/AdminLTE/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/AdminLTE/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/plugins/AdminLTE/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/plugins/AdminLTE/dist/js/demo.js"></script>
<!-- pjax -->
<script src="/static/plugins/AdminLTE/plugins/pjax/jquery.pjax.js"></script>

<script type="text/javascript">
    $(function () {
        // 跳转页
        $(document).on('pjax:complete', function (event, xhr, textStatus, options) {
            var url = xhr.getResponseHeader('X-PJAX-URL');
            if (url) {
                $.pjax({url: url, container: '.content-wrapper'})
            }
        });

        // a 链接
        $(document).pjax('a[target!=_blank]', '.content-wrapper');

        // form 表单
        $(document).on('submit', 'form[data-pjax]', function (event) {
            $.pjax.submit(event, '.content-wrapper');
        });

        // 阻止超时导致的链接跳转(ajax默认超时时间650毫秒，超时后强制刷新整个页面)
        $(document).on('pjax:timeout', function (event) {
            event.preventDefault()
        });

        // 重新加载
        //$.pjax.reload('.content-wrapper');
    })
</script>

<!-- PACE -->
<script src="/static/plugins/AdminLTE/bower_components/PACE/pace.min.js"></script>
<!-- jQueryForm -->
<script src="/static/plugins/AdminLTE/plugins/jQueryForm/jquery.form.js"></script>
</body>
</html>